<template>
  <v-chart class="line" :option="option" />
</template>

<script>
import { use } from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

use([
TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, LineChart, CanvasRenderer
]);

import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue";

export default defineComponent({
  name: "Line",
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: "dark",
  },
  setup: () => {
    const option = ref({
      title: {
        text: "资产异常趋势",
        textStyle:{
          color:'#000000'
        }
      },
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["2015", "2016", "2017", "2018", "2019", "2020", "2021"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "A-1栋",
          type: "line",
          data: [220, 182, 201, 194, 190, 230, 210],
          smooth: true,
        },
        {
          name: "A-2栋",
          type: "line",
          data: [220, 182, 191, 234, 290, 330, 310],
          smooth: true,
        },
        {
          name: "A-3栋",
          type: "line",
          data: [150, 232, 201, 154, 190, 130, 210],
          smooth: true,
        },
      ],
      backgroundColor: "transparent",
    });

    return { option };
  },
});
</script>

<style lang="less" scoped>
.area {
  width: 100%;
  height: 100%;
}
</style>
